<template>
  <div class="setting-container">
    <div class="container">
      <el-tabs    @tab-click="handleClick" class="tab-container" tab-position="left" style="height: 100%;">
        <el-tab-pane label="初始设置">
          <InitialSetup />
<!--          <EditIndex/>-->

        </el-tab-pane>
        <el-tab-pane label="评价标准">
          <evaluation-criterion/>
        </el-tab-pane>
        <el-tab-pane label="救活标准">
          <RevivalCriteria/>
        </el-tab-pane>
        <el-tab-pane label="分数权重">
          <ScoreWeight/>
        </el-tab-pane>
        <el-tab-pane label="评估事件">
          <AssessmentIndex/>
        </el-tab-pane>
        <el-tab-pane label="场景">
          <scene-index/>
        </el-tab-pane>

      </el-tabs>
    </div>
  </div>
</template>

<script>
import InitialSetup from "@/view/components/Initial-setup.vue";
import EvaluationCriterion from "@/view/components/evaluation-criterion.vue";
import RevivalCriteria from "@/view/components/Revival-criteria.vue";
import ScoreWeight from "@/view/components/Score-weight.vue";
import AssessmentIndex from "@/view/components/assessment.vue";
import SceneIndex from "@/view/components/scene.vue";
// import EditIndex from "@/view/components/edit";
// import EditIndex from "@/view/components/edit/index.vue";

export default {
  name: "LoggerIndex",
  components: {
    // EditIndex,


    SceneIndex,
    AssessmentIndex,
    ScoreWeight,
    RevivalCriteria,
    EvaluationCriterion,
    InitialSetup,


  },
  data() {
    return {
      drawer: false,

    }
  },
  methods: {
    openDrawer() {
      this.drawer = true
      const timer = setTimeout(() => {
        this.$refs.menu.menuIndex = 4
        clearTimeout(timer)
      }, 200)
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .tab-container{
  height: 100%;

  .el-tabs__item {
    height: 50px;
    width: 152px;
    text-align: center;
    line-height: 50px;

    &:after{
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      height: 1px;
      background-color: rgba(0,0,0,0.06);
    }

    &:last-child{
      &:after{
        height: 0;
      }
    }
  }
   .el-tabs__item:hover {
     color: #333333;
  }
  //点击后文字
  .el-tabs__item.is-active{
    color:#5E69C2 ;
  }

  //竖线
  .el-tabs__active-bar{
    width: 4px;
    background-color: #5E69C2;
  }



}
.setting-container{

  width: 100%;
  height: 100%;
  .container{
    height: calc(100% - 64px);
    padding-top: 11px;

  }
}
</style>